/*
 * @Description: 收藏页
 * @Author: jun.fu
 * @Date: 2019-03-11 09:35:38
 * @Last Modified by:   jun.fu
 * @Last Modified time: 2019-03-11 09:35:38
 */
import React, { Component } from 'react'
import { StyleSheet, Text, SectionList, RefreshControl } from 'react-native'
import { getUserCollection } from '../components/Collection/api/api';
import CollectionItem from '../components/Collection/components/CollectionItem';
import { px2dp } from 'rn-xiaobu-utils';
import { defaultStackOptions } from '../utils/DefaultTitleOption';

export default class Collection extends Component {
  static navigationOptions = ({ navigation }) => {
    let option = defaultStackOptions({ navigation })
    option.headerTitle = '收藏'
    return option
  }

  state = {
    list: [],
    refreshing: false
  }

  componentDidMount () {
    getUserCollection().then(res =>{
      this.setState({
        list: res.list
      })
    })
  }

  _onRefresh = ()=>{
    this.setState({
      refreshing: true
    }, ()=>{
      getUserCollection().then(res =>{
        this.setState({
          list: res.list,
          refreshing: false
        })
      })
    })
  }

  render() {
    return <SectionList style={styles.container}
      renderItem={({ item, index }) => <CollectionItem {...item} index={index}/>}
      renderSectionHeader={({ section: { title } }) => (
        <Text style={styles.title}>{title}</Text>
      )}
      sections={[
        { title: '我的收藏', data: this.state.list }
      ]}
      keyExtractor={(item, index) => index}
      refreshControl={
        <RefreshControl
          refreshing={this.state.refreshing}
          onRefresh={this._onRefresh}
        />
      }
    />
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F2F5F6'
  },
  title: {
    height: px2dp(74),
    backgroundColor: '#F2F5F6',
    color: '#999999',
    paddingLeft: px2dp(30),
    lineHeight: px2dp(74)
  }
})
